<template>
  <div id="centerLeft1">
    <chartBox :img="2" title="战区警情汇总">
      <div style="padding: 6px 24px 24px;height: 244px">

        <scrollTable :config="config"></scrollTable>
      </div>

    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'
import scrollTable from '_c/scrollTable.vue'
import upIcon from '@/assets/img/icon/up.png'
import downIcon from '@/assets/img/icon/down.png'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    apiData: {},
    mapType: {},
    timeMode: {},

  },
  watch: {
    apiData: {
      handler(val) {
        if (!isNotEmpty(val)) return
        this.dataFormat(val)
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      config: {
        header: ['序号',
          '战区',
          '警情总量',
          '环比变化',
          '同比变化'],
        data: [],
        columnWidth: [68, 94, 94, 94, 94],
      },
      items: [
        {
          title: '东部战区',
          params: [
            {value: '0', status: ''},
            {value: '0%', status: 'up'},
            {value: '0%', status: 'up'}
          ]
        },
        {
          title: '西部战区',
          params: [
            {value: '0', status: ''},
            {value: '0%', status: 'down'},
            {value: '0%', status: 'down'}
          ]
        }, {
          title: '南部战区',
          params: [
            {value: '0', status: ''},
            {value: '0%', status: 'down'},
            {value: '6%', status: 'down'}
          ]
        }, {
          title: '北部战区',
          params: [
            {value: '0', status: ''},
            {value: '0', status: 'flat'},
            {value: '0', status: 'flat'}
          ]
        },
      ]
    }
  },
  components: {
    chartBox,
    scrollTable
  },
  mounted() {
  },
  created() {
  },
  methods: {
    // 组装数据
    dataFormat() {
      const apiData = this.apiData
      // 示例用法
      const statusF = (v1, v2) => {
        if (v1 > v2) {
          return 'up'
        } else if (v2 > v1) {
          return 'down'
        } else {
          return 'flat'
        }
      }
      this.items.forEach(item => {
        // 查找接口数据中匹配的区域
        const match = apiData.find(data => data.areaName === item.title)
        let status = statusF(match.curNum, match.tongQiNum)
        let status2
        if (this.timeMode.mode === 2 && !!this.timeMode.endTime) {
          status2 = statusF(match.curNum, match.huanBiNum)
        }
        if (match) {
          // 使用 Vue.set 保证响应式更新
          this.$set(item.params, 0, {value: match.curNum, status: item.params[0].status})
          this.$set(item.params, 1, {
            value: (this.timeMode.mode === 2 && !!this.timeMode.endTime) ? (match.huanBiBianHuaLiang  || 0) + '%' : match.tongQiNum,
            status: (this.timeMode.mode === 2 && !!this.timeMode.endTime) ? status2 : ''
          })
          this.$set(item.params, 2, {
            value: (match.tongBiBianHuaLiang  + '%'),
            status
          })
        }
      })
      //默认配置
      let config = {
        header: ['序号',
          '战区',
          '警情总量',
          `${this.timeMode.mode === 1 ? '同期量' : '环比变化'}`,
          '同比变化'],
        data: [],
        columnWidth: [68, 94, 94, 94, 94],
      }
      config.data = this.items.map((item, idx) => {
        // 检查必备属性是否存在
        // if (!item.hasOwnProperty('index') || !item.hasOwnProperty('title') || !item.hasOwnProperty('params')) {
        //   throw new Error(`第 ${idx} 项数据缺少必需属性 (index, title, params)`);
        // }

        const row = []
        // 第一项：序号，包裹在 div 中
        row.push(`<div class="table_data">${idx + 1}</div>`)
        // 第二项：标题，包裹在 div 中
        row.push(`<div class="table_data">${item.title}</div>`)

        // 后续项：参数，根据类型进行格式化
        item.params.forEach(param => {
          // 如果参数为对象并且包含 value 和 status，则根据 status 来决定样式
          if (
              typeof param === 'object' &&
              param !== null
          ) {
            let arrow = ''
            let className = 'table_data'
            if (param.status === 'up') {
              arrow = `<img src="${upIcon}" alt=""/>`
            } else if (param.status === 'down') {
              arrow = `<img src="${downIcon}" alt=""/>`
            } else if (param.status === 'flat') {
              className = 'table_data blue'
            }
            row.push(`<div class='${className}'> ${arrow}${param.status === 'flat' ? '持平' : param.value}</div>`)
          } else {
            // 如果不是对象，则直接转换为字符串
            row.push(String(param))
          }
        })

        return row
      })
      this.config = config
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 472px;
$box-height: 398px;
#centerLeft1 {
  //height: $box-height;
  width: $box-width;
/*
  ::v-deep .table_header {
    font-weight: 400;
    font-size: 14px;
    color: #A2BED0;
    line-height: 14px;
    text-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    //padding: 0 20px;
  }

  ::v-deep .table_data {
    font-weight: 500;
    font-size: 14px;
    color: #A7C5D9;
    line-height: 14px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;

    &.blue {
      color: #16B3E0;
    }

    img {
      width: 9px;
      height: 11px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }*/
}

</style>
